<style>

  #node-CLOSED rect {
    stroke-width: 1px;
    fill: #f88;
  }

  .node:hover,
  .node > *:hover,
  rect > *:hover {
    cursor: pointer;
    opacity: 0.6;
  }

  path.edge {
    fill: none;
    stroke: #666;
    stroke-width: 3px;
  }

  .edge:hover {
    cursor: pointer;
    opacity: 0.4;
  }

  text.counter {
    stroke: #080;
  }

  text.inflight {
    stroke: #08f;
  }
</style>

<div ng-class="row-fluid" ng-controller="Camel.RouteController">

  <div ng-hide="inDashboard" class="span12 page-padded">
    <div class="section-header">

      <!-- add empty filter to make the CSS look good -->
      <div class="section-filter">
      </div>

      <div class="section-controls">
        <a href="#"
           class="dropdown-toggle"
           data-toggle="dropdown">
          Routes &nbsp;<i class="icon-caret-down"></i>
        </a>

        <ul class="dropdown-menu viewMenu">
          <li ng-repeat="route in viewSettings.routes">
            <label class="checkbox">
              <input type="checkbox" ng-model="route.selected" ng-disabled="viewSettings.routes.length <= 1" ng-change="updateSelectedRoute()"> {{route.name}}
            </label>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


<div ng-class="{'wiki-fixed' : !isJmxTab}" id="canvas" ng-controller="Camel.RouteController">
  <div ng-hide="isJmxTab">
    <ng-include src="'app/camel/html/breadcrumbBar.html'"></ng-include>
  </div>
  <svg class="camel-diagram" width="0" height="0">
    <defs>
      <marker id="arrowhead"
              viewBox="0 0 10 10"
              refX="8"
              refY="5"
              markerUnits="strokeWidth"
              markerWidth="4"
              markerHeight="3"
              orient="auto"
              style="fill: #333">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
      </marker>

      <filter id="drop-shadow" width="300%" height="300%">
        <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="19"/>
        <feOffset in="blur-out" result="the-shadow" dx="2" dy="2"/>
        <feComponentTransfer xmlns="http://www.w3.org/2000/svg">
          <feFuncA type="linear" slope="0.2"/>
        </feComponentTransfer>
        <feMerge xmlns="http://www.w3.org/2000/svg">
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
      <linearGradient id="rect-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(254,254,255);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(247,247,255);stop-opacity:1"/>
      </linearGradient>
      <linearGradient id="rect-select-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color: #ffffa0; stop-opacity: 0.7"/>
        <stop offset="100%" style="stop-color: #f0f0a0; stop-opacity: 0.7"/>
      </linearGradient>
    </defs>
  </svg>
</div>

